<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>通过js方法监听更改url中的参数
    <li>location.hash='xxx'</li>
    添加的方式相当于入栈
    <li>history.pushState({}，'','/xxx')最后一个参数为url</li>
    <li>history.replaceState({},''),'/xxx'不能回退</li>
    <li>history.go()填数字可以前进或者回退</li>
    <li>只做前进操作可以使用history.forward()</li>
    <li>只做回退操作可以使用history.back()</li>
</ul>
<h2>vue-router是用来配置url请求和js样式操作的映射关系的</h2>
<ul>1.vue-router的安装
    <li>我们先下载vue2的cli，使用npm进行运行时下载loader</li>
    <li>在入口文件main.js，导入router,挂载html里的父标签，并引入Vue实例</li>
    <li>在src目录下创建router目录，目录下创建index.js文件</li>
    2.index.js是router的配置文件
    <li>首先导入router</li>
    <li>使用use属性安装router插件，表示vue会使用此功能</li>
    <li>定义变量routes为数组用于存储之后的映射关系</li>
    <li>创建router实例，将变量引入</li>
    <li>最后将router实例导出</li>
    3.创建子组件
    4.返回index.js在变量内部建立映射关系，path:后面跟url替换的参数，component:后面跟需要替换的内容
    5.在根组件模板中使用router-link和router-view引入子组件
<li style="color:red">数据走向：html(父级标签也就是我们需要最终展示的标签)->main.js(这是入口文件里面引入了vue以及父组件的创建信息)->App.vue(这里面包含了父组件的内容模板以及操作)->子组件文件->父组件(子组件引入父组件注意使用了router的方法)->iindex.js(这是router主要配置文件，定义了组建和url映射关系)->main.js引入router映射关系</li>
<li style="color:red">其实前面就是正常的webpack使用vue的一般过程，映射关系的创建和引入是新的，也导致了子组件引入父组件的方式改变</li>
</ul>
</body>
</html>